<template>
	<div>
		<search @search="search"></search>
		<xtable @add="$refs['modify'].add()"
			@edit="$refs['modify'].edit($event)"
			@remove="$refs['modify'].remove($event)"
			@assignPermissions="$refs['assignPermissions'].open($event)"></xtable>
		<el-pagination :current-page="$store.state.app.searchParams.page" :page-size="$store.state.app.searchParams.size"
			:page-sizes="[10, 20, 50, 100]" :page-count="$store.state.app.totalPages" :total="$store.state.app.totalElements"
			@current-change="$store.state.app.searchParams.page = $event" 
			@size-change="$store.state.app.searchParams.size = $event"
			layout="total, sizes, prev, pager, next, jumper">
		</el-pagination>
		<modify ref="modify" @submit="submit"></modify>
		<assign-permissions ref="assignPermissions"></assign-permissions>
	</div>
</template>

<script>
import cfg from './js/';
import xtable from './xtable';
import search from './search';
import modify from './modify';
import assignPermissions from './assignPermissions';
import store from '@/store';

export default {
	store: cfg.appStore,
	components: {
		'xtable': xtable,
		'search': search,
		'modify': modify,
		'assign-permissions': assignPermissions
	},
	data() {
		return {}
	},
	methods: {
		search() {
			let self = this;
			let loading = self.$loading({
				target: self.$el,
				lock: true,
				text: '查询角色中...',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			});
			let config = {};
			config.params = self.$store.state.app.searchParams;
			let action = store.state.global.permissionMap['sys:role:search'];
			action.doAction(config).then(data => {
				self.$store.state.app.list = data.list;
				self.$store.state.app.totalPages = data.totalPages;
				self.$store.state.app.totalElements = data.totalElements;
				loading.close();
			}).catch(error => {
				self.$message({
					message: '查询角色失败：' + error.detail.msg,
					type: 'error',
					showClose: true
				});
				loading.close();
			});
		},
		submit({method, formData}) {
			this[method](formData);
		},
		add(formData) {
			let self = this;
			let loading = self.$loading({
				target: self.$el,
				lock: true,
				text: '添加角色中...',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			});
			let config = {};
			config.data = formData;
			let action = store.state.global.permissionMap['sys:role:add'];
			action.doAction(config).then(data => {
				self.$store.state.app.list.push(data.element);
				self.$message({
					message: '添加角色成功',
					type: 'success',
					showClose: true
				});
				loading.close();
			}).catch(error => {
				self.$message({
					message: '添加角色失败：' + error.detail.msg,
					type: 'error',
					showClose: true
				});
				loading.close();
			});
		},
		edit(formData) {
			let self = this;
			let loading = self.$loading({
				target: self.$el,
				lock: true,
				text: '修改角色中...',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			});
			let config = {};
			config.data = formData;
			let action = store.state.global.permissionMap['sys:role:edit'];
			action.doAction(config).then(data => {
				for(let i = 0; i < self.$store.state.app.list.length; i++) {
					let e = self.$store.state.app.list[i];
					if(e.id == data.element.id) {
						self.$store.state.app.list.splice(i, 1, data.element);
					}
				}
				self.$message({
					message: '修改角色成功',
					type: 'success',
					showClose: true
				});
				loading.close();
			}).catch(error => {
				self.$message({
					message: '修改角色失败：' + error.detail.msg,
					type: 'error',
					showClose: true
				});
				loading.close();
			});
		},
		remove(formData) {
			let self = this;
			let loading = self.$loading({
				target: self.$el,
				lock: true,
				text: '删除角色中...',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			});
			let config = {};
			config.data = formData;
			let action = store.state.global.permissionMap['sys:role:remove'];
			action.doAction(config).then(data => {
				for(let i = 0; i < self.$store.state.app.list.length; i++) {
					let e = self.$store.state.app.list[i];
					if(e.id == data.element.id) {
						self.$store.state.app.list.splice(i, 1);
					}
				}
				self.$message({
					message: '删除角色成功',
					type: 'success',
					showClose: true
				});
				loading.close();
			}).catch(error => {
				self.$message({
					message: '删除角色失败：' + error.detail.msg,
					type: 'error',
					showClose: true
				});
				loading.close();
			});
		}
	},
	watch: {
		'$store.state.app.searchParams.page': function(newVal, oldVal) {
			this.search();
		},
		'$store.state.app.searchParams.size': function(newVal, oldVal) {
			this.search();
		}
	},
	mounted() {
		this.search();
	}
}
</script>